<!-- 推拽 -->
<template>
  <div class="cp_box">
    <el-row :gutter="4">
      <el-col :span="19" class="left_warp_box">
        <el-row>
          <dl class="left_dl">
            <template v-for="item in weekLists">
              <dt :key="item">{{ item }}</dt>
            </template>
          </dl>

          <div class="data_box">
            <div class="row_box">
              <p>上午</p>
              <ul>
                <li v-for="(item, index) in morning" :key="item.title">
                  <draggable
                    v-model="item.goodsList"
                    chosenClass="chosen"
                    forceFallback="true"
                    group="site"
                    animation="0"
                    @add="onAdd1($event, index)"
                  >
                    <transition-group :style="groupStyle">
                      <el-tag
                        v-for="(tag, tagIndex) in item.goodsList"
                        :key="tagIndex"
                        closable
                        @close="closeTag(tagIndex, index, 'morning')"
                      >
                        {{ tag.name }}
                      </el-tag>
                    </transition-group>
                  </draggable>
                </li>
              </ul>
            </div>
            <div class="row_box">
              <p>下午</p>
              <ul>
                <li v-for="(item, index) in afternoon" :key="item.title">
                  <draggable
                    v-model="item.goodsList"
                    chosenClass="chosen"
                    forceFallback="true"
                    group="site"
                    animation="0"
                    @add="onAdd2($event, index)"
                    ><transition-group :style="groupStyle">
                      <el-tag
                        v-for="(tag, tagIndex) in item.goodsList"
                        :key="tagIndex"
                        closable
                        @close="closeTag(tagIndex, index, 'afternoon')"
                      >
                        {{ tag.name }}
                      </el-tag>
                    </transition-group>
                  </draggable>
                </li>
              </ul>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="5" class="right_wrap_box">
        <h2>菜品大全</h2>
        <draggable
          v-model="good_list"
          chosenClass="chosen"
          forceFallback="true"
          :group="grpupA"
          animation="0"
          :move="onMove"
        >
          <transition-group :style="groupStyle">
            <template v-for="item in good_list">
              <el-tag :key="item.id" class="diy_btns">{{ item.name }}</el-tag>
            </template>
          </transition-group>
        </draggable>
      </el-col>
    </el-row>

    <el-divider></el-divider>
    <el-button type="primary" @click="toSub">提交</el-button>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "ElementComponetsQuestionTz",
  // 注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      weekLists: ["", "星期一", "星期二", "星期三", "星期四", "星期五"],
      morning: [
        {
          goodsList: [{ name: "土豆牛肉", id: 1 }],
          title: "星期一",
        },
        { goodsList: [], title: "星期二" },
        { goodsList: [], title: "星期三" },
        { goodsList: [], title: "星期四" },
        { goodsList: [], title: "星期五" },
      ],
      afternoon: [
        {
          goodsList: [{ name: "土豆牛肉", id: 1 }],
          title: "星期一",
        },
        { goodsList: [], title: "星期二" },
        { goodsList: [], title: "星期三" },
        { goodsList: [], title: "星期四" },
        { goodsList: [], title: "星期五" },
      ],
      // 右侧
      good_list: [
        { name: "土豆牛肉", id: 1 },
        { name: "宫保鸡丁", id: 2 },
        { name: "果子狸", id: 3 },
        { name: "锅包肉", id: 4 },
        { name: "清蒸鲈鱼", id: 5 },
        { name: "狮子头", id: 6 },
        { name: "佛跳墙", id: 7 },
      ],

      //  设置属性
      grpupA: {
        name: "site",
        pull: "clone",
        put: false,
      },
      groupStyle: "min-height:120px;display: block;", //为空数组时的样式
    };
  },
  methods: {
    // 删除菜品 单独
    closeTag(sonIndex, faterIndex, list) {
      this[list][faterIndex].goodsList.splice(sonIndex, 1);
    },
    // 触发 （其实可以去掉）
    onMove(e) {
      // 获取当前选择菜品id e.draggedContext.element.id
      return true;
    },
    onAdd1(e, index) {
      this.morning[index].goodsList = this.morning[index].goodsList.filter(
        (item, index, self) => {
          return self.findIndex((t) => t.id === item.id) === index;
        }
      );
    },
    onAdd2(e, index) {
      this.afternoon[index].goodsList = this.afternoon[index].goodsList.filter(
        (item, index, self) => {
          return self.findIndex((t) => t.id === item.id) === index;
        }
      );
    },
    // 提交
    toSub() {
      console.table(this.morning);
      console.table(this.afternoon);
    },
  },
};
</script>

<style lang="less" scoped>
.cp_box {
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
  dl {
    padding: 0;
    margin: 0;
    dd {
      padding: 0;
      margin: 0;
    }
  }
  .left_warp_box {
    .left_dl {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-left: 1px solid #000;
      dt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        border: 1px solid #000;
        border-left: none;
      }
      dd {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 50px;
        border: 1px solid #ccc;
        border-top: none;
      }
    }
    .data_box {
      .row_box {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;

        p {
          margin: 0;
          padding: 0;
          width: calc(100% / 6);
          box-sizing: border-box;

          min-height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #000;
          border-top: none;
          border-right: none;
        }
        ul {
          width: calc(100% - (100% / 6));
          display: flex;
          justify-content: flex-start;
          border-left: 1px solid #000;
          li {
            width: 25%;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            span {
              margin: 4px 2px;
            }
          }
        }
      }
    }
  }
  .right_wrap_box {
    border: 1px solid #000;
    h2 {
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 18px;
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #000;
    }
    .diy_btns {
      margin: 10px;
      cursor: pointer;
    }
    .chosen {
      color: #fff;
      background: #f00;
    }
  }
}
</style>
